<template>
    <lay-card>


        <div style="text-align: center;">
  <lay-upload @done="getUploadFile2"  :disabledPreview="true">

  </lay-upload>
</div>
  <lay-field>
    <template #title>
        base64在线编码,上传文件在线转Base64
    </template>
  </lay-field>
  <lay-textarea placeholder="base64" v-model="dataurl" style="height: 400px;">
  </lay-textarea>
  <lay-quote>
    标准的Base64并不适合直接放在URL里传输，因为URL编码器会把标准Base64中的“/”和“+”字符变为形如“%XX”的形式，而这些“%”号在存入数据库时还需要再进行转换，因为ANSI SQL中已将“%”号用作通配符。
为解决此问题，可采用一种用于URL的改进Base64编码，它在末尾填充'='号，并将标准Base64中的“+”和“/”分别改成了“-”和“_”，这样就免去了在URL编解码和数据库存储时所要作的转换，避免了编码信息长度在此过程中的增加，并统一了数据库、表单等处对象标识符的格式。
另有一种用于正则表达式的改进Base64变种，它将“+”和“/”改成了“!”和“-”，因为“+”,“*”以及前面在IRCu中用到的“[”和“]”在正则表达式中都可能具有特殊含义。
此外还有一些变种，它们将“+/”改为“_-”或“._”（用作编程语言中的标识符名称）或“.-”（用于XML中的Nmtoken）甚至“_:”（用于XML中的Name）。
Base64要求把每三个8Bit的字节转换为四个6Bit的字节（3*8 = 4*6 = 24），然后把6Bit再添两位高位0，组成四个8Bit的字节，也就是说，转换后的字符串理论上将要比原来的长1/3。
  </lay-quote>
</lay-card>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import { LayUpload } from "@layui/layui-vue";
const dataurl=ref("");
const  fileToBase64Async=(file:any)=> {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e:any) => {
      resolve(e.target.result);
    };
  });
}


 const  getUploadFile2=(file:any)=>{
    console.log(file);
if(file.data.length>0){
   fileToBase64Async(file.data[0]).then((resp:any)=>{
    dataurl.value=resp;
   });
 
}
 }

</script>